<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">

    <title>Tab选项卡动画切换效果</title>
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="/fonts/css/font-awesome.css">
    <link rel="stylesheet" href="152.css">
</head>

<body>
    <div class="container">
        <div class="nav">
            <div class="item active"><i class="fa fa-bicycle"></i></div>
            <div class="item"><i class="fa fa-motorcycle"></i></div>
            <div class="item"><i class="fa fa-bus"></i></div>
            <div class="item"><i class="fa fa-car"></i></div>
            <div class="item"><i class="fa fa-subway"></i></div>
        </div>
        <div class="content">
            <section class="active"><span>1</span></section>
            <section><span>2</span></section>
            <section><span>3</span></section>
            <section><span>4</span></section>
            <section><span>5</span></section>
        </div>
    </div>
</body>

</html>

<script src="152.js"></script>